<template>
	<view class="pb-30">
		<view class="px-20 pt-20 bg-f top-search">
			<uv-search shape="square" bgColor="#f7f7f7" placeholder="请输入订单号或手机号查询" searchIconColor="#999"
				placeholderColor="#999" disabled :showAction="false" @click="handleSearchClick"></uv-search>
				<view class="scan" @click="handleScan">
					<image src="/static/scan-red.png"></image>
				</view>
		</view>

		<!-- status tab -->
		<view class="status-tab-wrap bg-f">
			<view class="tab-wrap uv-tabs-fs-28">
				<uv-tabs inactiveStyle="color: #666" activeStyle="color: #141414" lineWidth="55rpx" lineHeight="6rpx"
					lineColor="url('/static/tab-item-bg.png') 100% 100%" :list="statusList"
					:current="currentStatusIndex" @change="handleStatusChange"></uv-tabs>
			</view>
		</view>

		<view class="order-container">
			<view class="order-item bg-f radius-10" v-for="(item,index) in list" :key="index" @click="pageTo(item.id)">
				<view class="sn-and-status fs-24 flex-between">
					<view class="color-a">
						<text>订单号：</text>
						<text>{{item.orderNumber}}</text>
					</view>
					<view style="color: #ff6a2f">{{getSname(item.status)}}</view>
				</view>

				<view class="product-info bg-f7 radius-10" v-for="(item2,index2) in item.productList" :key="index2">
					<view class="product-name-wrap flex">
						<view class="flex-1">{{item2.productName}}</view>
						<view class="fs-24 fw-700">
							<text class="fs-18">￥</text>
							<text>{{item2.price}}</text>
						</view>
					</view>
					<view class="flex">
						<view class="flex-1 fs-24 color-a">
							<text>安装尺寸：</text>
							<text>{{item2.sizeWidth}}*{{item2.sizeHeight}}</text>
							<text class="square">平方数：</text>
							<text>{{(item2.areas*item2.productCount).toFixed(2)}}</text>
						</view>

						<view class="fs-24">
							<text>x</text>
							<text>{{item2.productCount}}</text>
						</view>
					</view>
				</view>
				<view class="total fs-24 text-right">
					<text>共</text>
					<text>{{item.productList.length}}</text>
					<text>件，应付金额￥</text>
					<text class="fs-30 fw-700">{{item.amountReceivable}}</text>
				</view>
			</view>
			<view class="nolist" v-if="nolist">
				暂无订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusList: [{
						status: 0,
						name: '全部'
					},
					{
						status: 1,
						name: '待确认'
					},
					{
						status: 2,
						name: '待排产'
					},
					{
						status: 3,
						name: '待生产'
					},
					{
						status: 4,
						name: '生产中'
					},
					{
						status: 5,
						name: '待发货'
					},
					{
						status: 6,
						name: '待收货'
					},
					{
						status: 7,
						name: '待取货'
					},
					{
						status: 8,
						name: '已收货'
					},
					{
						status: 9,
						name: '已完成'
					}
				],
				ss: [{
					v: "10",
					n: "待确认"
				}, {
					v: "20",
					n: "待排产"
				}, {
					v: "30",
					n: "待生产"
				}, {
					v: "40",
					n: "生产中"
				}, {
					v: "50",
					n: "待发货"
				}, {
					v: "61",
					n: "待收货"
				}, {
					v: "62",
					n: "待取货"
				}, {
					v: "71",
					n: "已收货"
				}, {
					v: "72",
					n: "已取货"
				}, {
					v: "90",
					n: "已完成"
				}],
				currentStatusIndex: 0,
				list: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				nolist: false,
				type: '',
				sn: '',
				phone: "",
				captcha: ""
			}
		},
		computed: {
			currentStatus() {
				return this.statusList[this.currentStatusIndex].status
			},
			getSname() {
				return (ss) => {
					let index = this.ss.findIndex(item => item.v == ss)
					return index == -1 ? '' : this.ss[index].n
				}
			}
		},
		onLoad(o) {
			this.type = o.type
			if (this.type == 1) {
				this.sn = o.sn
				this.getList1()
			} else {
				this.phone = o.phone
				this.captcha = o.captcha
				this.getList2()
			}

		},
		methods: {
			handleScan() {
				uni.scanCode({
					scanType: ['barCode'],
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						if(res.scanType == 'CODE_128'){
							console.log(res.result,222222)
							let orderNumber = res.result
							this.$api.postOrderSearchNumber({
								orderNumber: orderNumber,
								pageNum: 1,
								pageSize: 10,
							}).then((result)=>{
								console.log(result.data,'result')
								if(result.data && result.data.id){
									uni.navigateTo({
										url: `/pages/order-detail?id=${result.data.id}&type=3`
									})
								}else{
									uni.showToast({
										title: '订单不存在',
										icon: 'none'
									})
								}
							})
						}else{
							uni.showToast({
								title: '非法条码',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						})
					}
				});
			},
			pageTo(id) {
				uni.navigateTo({
					url: `/pages/order-detail?id=${id}&type=3`
				})
			},
			async getList1() {
				let ss = ['', '10', '20', '30', '40', '50', '40', '61', '62', '71', '90']

				const result = await this.$api.postOrderList({
					status: ss[this.currentStatusIndex],
					orderNumber: this.sn,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				})
				if (result) {
					this.list = result.rows
					this.total = Math.ceil(result.total / this.pageSize);
					this.nolist = this.total == 0
				}

			},
			async getList2() {
				let ss = ['', '10', '20', '30', '40', '50', '40', '61', '62', '71', '90']
				const result = await this.$api.postOrderList({
					status: ss[this.currentStatusIndex],
					customerPhone: this.phone,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				})
				if (result) {
					this.list = [...this.list, ...result.rows]
					this.total = Math.ceil(result.total / this.pageSize);
					this.nolist = this.total == 0
				}
			},
			handleSearchClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleStatusChange(event) {
				this.currentStatusIndex = event.index
				this.list = []
				this.pageNum = 1
				if (this.type == 1) {
					this.getList1()
				} else {
					this.getList2()
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.nolist {
		text-align: center;
		padding: 100rpx 30rpx;
		font-size: 28rpx;
		color: #666;
	}
	.top-search{
		display: flex;align-items: center;justify-content: space-between;
		.scan{
			width: 80rpx;height: 60rpx;
			display: flex;align-items: center;text-align: center;;justify-content: center;
			image{
				width: 40rpx;height: 40rpx;
			}
		}
	}
	// status tab
	.status-tab-wrap {
		height: 92rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		.tab-wrap {
			transform: translateY(4rpx);
		}
	}

	.order-container {
		margin: 23rpx 20rpx 0;

		.order-item {
			padding: 26rpx 15rpx 36rpx;
			margin-bottom: 18rpx;
		}

		.sn-and-status {
			margin-bottom: 24rpx;
		}

		.product-info {
			padding: 20rpx 17rpx 17rpx 18rpx;

			&+.product-info {
				margin-top: 6rpx;
			}
		}

		.product-name-wrap {
			margin-bottom: 17rpx;
		}

		.square {
			margin-left: 35rpx;
		}

		.total {
			margin-top: 39rpx;
		}

		.list-button {
			margin-top: 32rpx;
			width: 164rpx;
			height: 60rpx;
			box-sizing: border-box;
			border: 2rpx solid #ff4c2a;
			background: #ff4c2a;
			color: #fff;

			&.plain {
				background: transparent;
				color: #ff4c2a;
			}
		}
	}
</style>